<!--
 * @Author: fisher
 * @Date: 2023-08-07 14:43:49
 * @LastEditTime: 2024-01-10 10:23:05
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\templates\modules\warehouse.vue
-->
<template>
  <div>
    <!-- 搜索及操作按钮 -->
    <div class="operate">
      <div class="search">
        <span>仓库名称:</span>
        <div class="search_input">
          <input
            v-model="searchKey"
            type="text"
            placeholder="请输入"
            @change="searchKeyChange"
          />
          <img
            src="@/assets/img/dataManagement/search.webp"
            alt="search"
            @click="search"
          />
        </div>
        <div v-if="showClearSearch" class="btn btn_prime" @click="clearSearch">
          清空
        </div>
      </div>
      <div class="btn btn_prime" @click="addWarehouse">新增仓库</div>
      <div class="btn btn_prime" @click="addTemplate">新增模板</div>
      <div
        class="btn"
        :class="{ btn_prime: multipleSelection.length }"
        @click="deleteWarehouse"
      >
        批量删除
      </div>
    </div>
    <div ref="table" class="table">
      <fks-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; height: calc(100% - 64px); overflow-y: scroll"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
      >
        <fks-table-column type="selection" width="55" />
        <fks-table-column type="index" label="序号" width="50" />
        <fks-table-column prop="warehouseName" label="仓库名称" width="200" />
        <fks-table-column
          prop="description"
          label="仓库描述"
          show-overflow-tooltip
        />
      </fks-table>
      <fks-pagination
        class="pagination"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增仓库弹窗 -->
    <whaleHouseDialog v-if="whaleHouseVisible" class="whaleHouseDialog" />
    <!-- 新增模板弹窗 -->
    <templateDialog v-if="templateVisible" class="templateDialog" />
  </div>
</template>

<script>
import { getWarehouseList, deleteWarehouses } from "../api.js";
import whaleHouseDialog from "../components/whaleHouseDialog.vue";
import templateDialog from "../components/templateDialog.vue";
export default {
  components: { whaleHouseDialog, templateDialog },
  data() {
    return {
      searchKey: "",
      showClearSearch: false,
      tableData: [],
      multipleSelection: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableLoading: false,
      whaleHouseVisible: false,
      templateVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.pageNo = 1;
    this.pageSize = 10;
    this.getData();
  },
  destroyed() {},
  methods: {
    async getData() {
      this.tableLoading = true;
      const data = {};
      if (this.searchKey) {
        data.warehouseName = this.searchKey.trim();
      }
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      try {
        const res = await getWarehouseList(data, params);
        this.total = res.data.total;
        this.tableData = [...res?.data?.list];
        this.tableLoading = false;
      } catch (err) {
        throw new Error("未获取到数据:", err);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    addWarehouse() {
      this.whaleHouseVisible = true;
    },
    deleteWarehouse() {
      if (!this.multipleSelection.length) {
        this.$notify.info({
          title: "消息",
          message: "请选择删除项，再进行继续删除操作！",
        });
        return false;
      } else {
        this.$confirm("是否删除该仓库?", "删除仓库", {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          deleteMode: true,
        })
          .then(() => {
            const ids = this.multipleSelection.map((item) => {
              return item.id;
            });
            deleteWarehouses(ids).then((res) => {
              if (res.status) {
                this.$message({
                  message: "删除成功！",
                  type: "success",
                });
                this.getData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    addTemplate() {
      this.templateVisible = true;
    },
    searchKeyChange() {
      console.log("searchKeyChange");
      this.showClearSearch = true;
    },
    search() {
      this.getData();
    },
    clearSearch() {
      this.searchKey = "";
      this.getData();
      this.showClearSearch = false;
    },
    rowClick(row) {
      this.$emit("toDetails", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  // margin-top: 20px;
  height: calc(100% - 76px);
  .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
}
.operate {
  padding: 20px 0;
  display: flex;
  align-items: center;
  .search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    span {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.85);
    }
    &_input {
      position: relative;
      width: 266px;
      height: 36px;
      input {
        width: 100%;
        height: 100%;
        border: 1px solid #cbd5dd;
        outline: none;
        font-size: 14px;
        color: #000;
        padding: 0 30px 0 12px;
      }
      input::-webkit-input-placeholder {
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.25);
      }
      img {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }
  }
  .btn {
    width: 80px;
    height: 36px;
    background: #d8d8d8;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    // 当前页面特殊间距
    margin-left: 20px;
  }
  .btn:hover {
    opacity: 0.85;
    box-shadow: 0 0 3px 0px #666;
  }
  .btn_prime {
    background: #3f9eff;
    color: #fff;
  }
}

.whaleHouseDialog,
.templateDialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
</style>
